<template>
	<view class="scroll-row-item mr-3" style="padding: 2upx;">
		<view class="card-item d-flex flex-column a-center j-sb">
			<view style="width: 90upx;height: 90upx;margin-top: 24upx;border-radius: 45upx;overflow: hidden;">
				<image :src="cardData.thumb" mode="" style="width: 90upx;height: 90upx;"></image>
			</view>
			<text class="font-30">{{ cardData.authorName }}</text>
			<text class="font-24" style="color: #999999;">{{ cardData.buildingName }}</text>
			<view class="d-flex" style="justify-content: space-around;width: 100%;">
				<view class="d-flex flex-column a-center">
					<text class="font-30" style="font-weight: 500;">{{ cardData.customViews }}</text>
					<text class="font-20" style="color: #666666;">浏览</text>
				</view>
				<view class="d-flex flex-column a-center">
					<text class="font-30" style="font-weight: 500;">{{ cardData.commentCount }}</text>
					<text class="font-20" style="color: #666666;">评论</text>
				</view>
			</view>
			<text class="btn">查看</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		cardData: {
			type: Object,
			default: () => {
				return {};
			}
		}
	}
};
</script>

<style scoped>
.card-item {
	width: 300rpx;
	height: 400rpx;
	box-shadow: 0rpx 0rpx 11rpx 0px rgba(0, 0, 0, 0.1);
	border-radius: 3rpx;
}
.btn {
	width: 217rpx;
	height: 54rpx;
	background-color: #337cbd;
	font-size: 30rpx;
	color: #ffffff;
	text-align: center;
	margin-bottom: 24rpx;
}
</style>
